<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Responsive Vertical Slider with Clip-Path Animation | Swiper JS</title>
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
		<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
		<link rel="stylesheet" href="./swiper.css"/>
	</head>
	  <body>
	    <div class="swiper-container">
	      <div class="swiper-wrapper">
	        <div class="swiper-slide">
	          <div class="content" data-content="one">
	            <h1>Hallstatt, Austria</h1>
	            <p>
	              Visit Hallstatt, Austria, a beautiful village by a clear lake,
	              surrounded by tall mountains. Walk through old streets, see
	              ancient salt mines, and enjoy the peaceful views. This tour is
	              perfect for nature lovers and history fans.
	            </p>
	          </div>
	          <div class="background" data-item="one"></div>
	        </div>
	
	        <div class="swiper-slide">
	          <div class="content" data-content="two">
	            <h1>Paris, France</h1>
	            <p>
	              Explore Paris, the City of Light, known for its romance and famous
	              landmarks like the Eiffel Tower. Enjoy delicious food, visit the
	              Louvre, and stroll along the Seine River. Choose this tour to
	              experience the charm and culture of France.
	            </p>
	          </div>
	          <div class="background" data-item="two"></div>
	        </div>
	
	        <div class="swiper-slide">
	          <div class="content" data-content="three">
	            <h1>Amsterdam, Netherlands</h1>
	            <p>
	              Discover Amsterdam, a city full of canals, bicycles, and culture.
	              Visit the Van Gogh Museum, take a canal cruise, and explore lively
	              streets. This tour is great for those who love art, history, and a
	              vibrant city atmosphere.
	            </p>
	          </div>
	          <div class="background" data-item="three"></div>
	        </div>
	
	        <div class="swiper-slide">
	          <div class="content" data-content="four">
	            <h1>Kyoto, Japan</h1>
	            <p>
	              Travel to Kyoto, Japan, a city rich in tradition and beauty. Visit
	              ancient temples, enjoy beautiful gardens, and see colorful geisha
	              districts. This tour is perfect for those who want to experience
	              Japan's history and culture.
	            </p>
	          </div>
	          <div class="background" data-item="four"></div>
	        </div>
	
	        <div class="swiper-slide">
	          <div class="content" data-content="five">
	            <h1>New York, USA</h1>
	            <p>
	              Experience New York City, where excitement and adventure await at
	              every corner. See the Statue of Liberty, enjoy a Broadway show,
	              and taste food from around the world. This tour is ideal for those
	              who want to feel the energy of a big city.
	            </p>
	          </div>
	          <div class="background" data-item="five"></div>
	        </div>
	      </div>
	      <div class="swiper-pagination"></div>
	    </div>
	
	    <div class="footer">
	      <div class="feature">
	        <i class="fa-solid fa-house"></i>
	        <div>
	          <p>Accommodation</p>
	          <small>5 days</small>
	        </div>
	      </div>
	      <hr />
	      <div class="feature">
	        <i class="fa-solid fa-headphones"></i>
	        <div>
	          <p>Live guide</p>
	          <small>available</small>
	        </div>
	      </div>
	      <hr />
	      <div class="feature">
	        <i class="fa-solid fa-clock"></i>
	        <div>
	          <p>Easy cancellation</p>
	          <small>cancel before 48 hours</small>
	        </div>
	      </div>
	      <hr />
	      <button class="btn">Book Now</button>
	    </div>
	
	    <a href="https://www.youtube.com/@ecemgokdogan/videos" target="_blank" class="logo"><img src="https://assets.codepen.io/9868786/youtube.webp" alt="HTML tutorial"></a>
		<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
		<script src="./swiper.js"></script>
	  </body>
</html>